/* 修复input 背景不协调 和光标变色 */
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
$bg: #fff;
$light_gray: #eee;
$cursor: #000000;
$input_gray: #333;
$dark_gray: #889aa4;
$light_gray: #eee;
$account-icon: #93a2bb;
$verify-code-link: #0079FE;
// @supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
//   .login-container .el-input input {
//     color: $input_gray;
//     &::first-line {
//       color: $cursor;
//     }
//   }
// }

/* reset element-ui css */
.login-new-container{
    overflow: hidden;
    font-size: 0;
    position: relative;
    white-space: nowrap;
    box-shadow: 0 0 20px rgba(0,0,0,.08);
  .login-left{
    height: 600px;
    width: 300px;
    border-radius: 3px 0 0 3px;
    // background: url(../assets/login/register-bg.jpg) no-repeat center;
    img{
      height: 600px;
      width: 300px;
      position: absolute;
      top:0;
      left: 0;
      right: 0;
    }
  }
  .login-new-denglu{
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 90px;
  }
}
.login-container {
  width: 500px;
  height: 600px;
  /deep/ .el-input {
    display: inline-block;
    height: 44px;
    margin-left: -48px;
    padding-left: 48px;
    box-sizing: border-box;
    vertical-align: middle;
    &.getcode-input{
        margin: 0;
        padding: 0;
        margin-right: -75px;
        padding-right: 75px;
        cursor: pointer;
    }  
    input {
      -webkit-box-shadow: none !important;
      box-shadow: none !important;
      background: transparent;
      border: 1px solid $light_gray;
      -webkit-appearance: none;
      border-radius: 0px;
      padding: 12px 5px 12px 15px;
      color: $input_gray !important;
      height: 44px;
      font-size: 14px;
      vertical-align: middle;
      caret-color: $cursor;
      &:-webkit-autofill {
        -webkit-box-shadow: 0 0 0px 1000px $bg inset !important;
        -webkit-text-fill-color: $cursor !important;
      }
    }
  }
  /deep/ .el-form-item {
    border: 0;
    background: rgb(255, 255, 255);
    border-radius: 5px;
    color: #454545;
    .el-form-item__error {
      position: relative;
      display: block;
      font-size: 12px;
      color: #f1495c;
      line-height: 20px;
      top: 100%;
      left: 0;
      padding-top: 6px;
    }
    &.func-form-item{
        margin-bottom: 10px;
        margin-top: -18px;
        .el-checkbox__label,a {
            font-size: 12px;
        }
        .el-checkbox__label{
            color: #495060
        }
        a.forget{
            color: #999;
        }
    }
  }
  /deep/ .login-form {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    .tips {
      font-size: 14px;
      color: #fff;
      margin-bottom: 10px;
      span {
        &:first-of-type {
          margin-right: 16px;
        }
      }
    }
    .getcode-container,
    .svg-container {
      text-align: center;
      vertical-align: middle;
      display: inline-block;
      height: 44px;
      padding: 4px 7px;
      font-size: inherit;
      font-weight: 400;
      -webkit-transition: border 0.2s ease-in-out;
      transition: border 0.2s ease-in-out;
    }
    .getcode-container {
      float: right;
      font-size: 12px;
      color: $verify-code-link;
      border: 1px solid $light_gray;
      border-left: none !important;
      border-bottom-left-radius: 0 !important;
      border-top-left-radius: 0 !important;
      border-radius: 4px;
    }
    .svg-container {
      float: left;
      color: $account-icon;
      box-shadow: none !important;
      border-right: none !important;
      -webkit-box-shadow: none !important;
      position: relative;
      border: 1px solid $light_gray;
      border-radius: 4px;
      border-bottom-right-radius: 0 !important;
      border-top-right-radius: 0 !important;
      width: 48px;
    }
    .show-pwd {
      position: absolute;
      right: 10px;
      top: 7px;
      font-size: 16px;
      color: $dark_gray;
      cursor: pointer;
      user-select: none;
    }
    .thirdparty-button {
      position: absolute;
      right: 35px;
      bottom: 28px;
    }
    .register-link {
      color: rgb(68, 117, 255);
    }

    .register-link:hover {
      text-decoration: underline;
    }
  }
}
